<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CClub在线笔试</title>
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        *{
            padding: 0 0px;
            margin: 0 0px;
        }
        .el-header{
            background-color:#f2f5ff;
            width:100%;
            height:50px;
        }
        .el-border{
            width:1490px;
            border: 1px solid rgb(230,230,230);
            margin-left:20px;
            margin-top:20px;
        }
        .el-bg{
            background-color:#fbfbff;
            width:1470px;
            height:100px;
            margin-left:10px;
            margin-top:10px;
        }
        .el-button1{
            width:20px;
            height:20px;
            background-color:#5272ff;
            border-radius:20px;
            color:white;
            padding: 5px 0px 5px 10px;
            font-size:13px;
        }
        .el-button2{
            background-color:#a9b9ff;
            width:20px;
            height:20px;
            border-radius:20px;
            color:white;
            padding: 5px 0px 5px 10px;
            font-size:13px;
        }
        .el-frame{
            background-color:#c6c6c6;
            font-size:60px;
            color:white;
            width:120px;
            height:140px;
            border-radius:5px;
            float:left;
        }
        .el-frame1{
            font-size:60px;
            color:blue;
            width:120px;
            height:140px;
            border-radius:5px;
            float:left;
            background-color:#f2f5ff;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="el-header">
        <div style="margin-left:5px;padding-top:15px;font-weight:700;">{{exam.exam_name}}</div>
    </div>
    <div class="el-border">
        <div class="el-bg">
            <div style="margin-left:150px;padding-top:25px;float:left; ">
                <div :class="state===1?'el-button1':'el-button2'">1</div>
                <div style="margin-top:5px;margin-left:-15px;">信息登记</div>
            </div>
            <div style="float:left;margin-left:520px;padding-top:25px;">
                <div :class="state===2?'el-button1':'el-button2'">2</div>
                <div style="margin-top:5px;margin-left:-15px;">考前须知</div>
            </div>
            <div style="float:left;margin-left:500px;padding-top:25px;">
                <div :class="state===3?'el-button1':'el-button2'">3</div>
                <div style="margin-top:5px;margin-left:-15px">开始考试</div>
            </div>
        </div>
        <!--信息登记-->
        <div v-if="state===1" style="margin-bottom:70px;">
            <div style="margin-left:600px;padding-top:50px;font-size:12px;" v-for="(item,index) in exam.exam_user_info">
                <div style="color:red;float:left;" v-if="item.isMust==='2'">*</div>
                <div style="float:left;width:50px;" :style="{'margin-left':item.isMust==='1'?'10px':'5px'}">{{item.name}}</div>
                <div style="margin-left:30px;float:left;margin-top:-5px;">
                    <el-input v-model="candidateInfo[index]" size="small" style="width:200px;"></el-input>
                </div>
            </div>
        </div>
        <!--考试须知-->
        <div v-if="state===2" style="margin-bottom:70px;">
            <div style="margin-left:600px;margin-top:30px;">
                <span>考试开始时间:</span>
                <span style="margin-left:10px;">{{exam.exam_start_time}}</span>
            </div>
            <div style="margin-left:600px;margin-top:15px;">
                <span>考试时长:</span>
                <span>{{exam.exam_longTime}}分钟</span>
            </div>
            <div style="margin-left:600px;margin-top:15px;">
                <span>笔试开始后</span>
                <span style="color:red;font-weight:700;">{{exam.exam_noEntry_time}}</span>
                <span>分钟不允许进入考试</span>
            </div>
            <div style="margin-left:600px;margin-top:15px;" v-if="exam.exam_jumpOut_number===1">
                <span>本次笔试会记录跳出作答页面次数</span>
            </div>
            <div style="margin-left:600px;margin-top:15px;" v-if="exam.exam_recording===1">
                <span>考试过程中将会打开摄像头进行过程记录</span>
            </div>
            <div style="margin-left:600px;margin-top:15px;">
                <span>考试过程中作答如果遇到问题,可检查设备网络再次从链接进入考试,作答记录将会保存</span>
            </div>
        </div>
        <!--等待考试-->
        <div v-if="state===3" style="margin-bottom:190px;">
            <div style="margin-left:470px;margin-top:50px;">
                <div style="margin-left:200px;margin-top:20px;font-size:14px;">距笔试开始还有</div>
                <div style="margin-top:15px;">
                    <div class="el-frame">
                        <div style="margin-left:25px;margin-top:10px;">{{time.day}}</div>
                        <div style="margin-left:45px;margin-top:10px;font-size:24px;">天</div>
                    </div>
                    <div class="el-frame" style="margin-left:10px;">
                        <div style="margin-left:25px;margin-top:10px;">{{time.hour}}</div>
                        <div style="margin-left:35px;margin-top:10px;font-size:24px;">小时</div>
                    </div>
                    <div class="el-frame" style="margin-left:10px;">
                        <div style="margin-left:25px;margin-top:10px;">{{time.minute}}</div>
                        <div style="margin-left:35px;margin-top:10px;font-size:24px;">分钟</div>
                    </div>
                    <div class="el-frame" style="margin-left:10px;">
                        <div style="margin-left:25px;margin-top:10px;">{{time.second}}</div>
                        <div style="margin-left:45px;margin-top:10px;font-size:24px;">秒</div>
                    </div>
                </div>
            </div>
        </div>
        <!--开始考试-->
        <div v-if="state===4" style="margin-bottom:190px;">
            <div style="margin-left:550px;margin-top:50px;">
                <div style="margin-left:150px;margin-top:20px;font-size:14px;">距笔试结束还有</div>
                <div style="margin-top:15px;">
                    <div class="el-frame1" style="margin-left:10px;">
                        <div style="margin-left:25px;margin-top:10px;">{{time.hour}}</div>
                        <div style="margin-left:35px;margin-top:10px;font-size:24px;">小时</div>
                    </div>
                    <div class="el-frame1" style="margin-left:10px;">
                        <div style="margin-left:25px;margin-top:10px;">{{time.minute}}</div>
                        <div style="margin-left:35px;margin-top:10px;font-size:24px;">分钟</div>
                    </div>
                    <div class="el-frame1" style="margin-left:10px;">
                        <div style="margin-left:25px;margin-top:10px;">{{time.second}}</div>
                        <div style="margin-left:45px;margin-top:10px;font-size:24px;">秒</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-left:635px;margin-top:20px;">
        <el-button type="primary" style="width:280px;" v-if="state===1||state===2" @click="next">下一步</el-button>
        <el-button type="primary" style="width:280px;" v-if="state===3" disabled>开始考试</el-button>
        <el-button type="primary" style="width:280px;" v-if="state===4" @click="joinExam">开始考试</el-button>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            candidateInfo:[],
            state: 1,
            time:{
                day: '',
                hour: '',
                minute: '',
                second: ''
            },
            exam:{}
        },
        created(){
            this.getExamInfo();
        },
        methods:{
            showTime(){
                let the=new Date(this.exam.exam_start_time+'');
                if(parseInt(the.getTime())<parseInt(new Date().getTime())){
                    this.state=4;
                    this.showStartExamTime();
                }else{
                    let timer = setInterval(() => {
                        let date = the - new Date();
                        let days = Math.floor(date / 1000 / 60 / 60 / 24) // 从这里开始
                        let daysmod = date - days * 24 *60 * 60 * 1000
                        let hours = Math.floor(daysmod / 1000 / 60 / 60)
                        let hoursmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60)
                        let minutes = Math.floor(hoursmod / 1000 / 60)
                        let minutesmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)
                        let seconds = Math.floor(minutesmod / 1000) // 到这里结束，是将总毫秒转化成对应天数+小时数+分钟数+秒数的转换方法
                        this.timeUtils(days,hours,minutes,seconds);
                    }, 1000);
                }
            },
            showStartExamTime(){
                let time=this.exam.exam_start_time;
                let time1=time.split(" ")[1].split(":")[0];
                let time2=time.split(" ")[1].split(":")[1];
                time1=parseInt(time1)+Math.floor(this.exam.exam_longTime/60);
                time2=parseInt(time2)+this.exam.exam_longTime%60;
                if(time2>=60){
                    time2-=60;
                    time1++;
                }
                let timeStr=time.split(" ")[0]+" "+time1+":"+time2;
                let endTime=new Date(timeStr);
                console.log(endTime);
                let timer=setInterval(() => {
                    let date=endTime-new Date();
                    let days = Math.floor(date / 1000 / 60 / 60 / 24) // 从这里开始
                    let daysmod = date - days * 24 *60 * 60 * 1000
                    let hours = Math.floor(daysmod / 1000 / 60 / 60)
                    let hoursmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60)
                    let minutes = Math.floor(hoursmod / 1000 / 60)
                    let minutesmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)
                    let seconds = Math.floor(minutesmod / 1000) // 到这里结束，是将总毫秒转化成对应天数+小时数+分钟数+秒数的转换方法
                    this.timeUtils(days,hours,minutes,seconds);
                }, 1000);
            },
            timeUtils(day,hour,minute,second){
                if(day+hour+minute+second===0){
                    this.state=4;
                    this.showStartExamTime();
                }else{
                    this.time.day=day<10?('0'+day):day;
                    this.time.hour=hour<10?('0'+hour):hour;
                    this.time.minute=minute<10?('0'+minute):minute;
                    this.time.second=second<10?('0'+second):second;
                }
            },
            async getExamInfo(){
                let url=window.location.href.split("/");
                let result=await axios.get('/getOneExamInfo?exam_id='+url[url.length-1]);
                this.exam=result.data;
                this.exam.exam_user_info=eval('('+this.exam.exam_user_info+')');
                this.isEndExam();
            },
            next(){
              if(this.state===1){
                  this.judgeExamUserInfoExist();
               }else{
                  this.state++;
                  this.showTime();
              }
            },
            async judgeExamUserInfoExist(){
                let params=new FormData();
                let nameIndex,phoneIndex,mailIndex;
                for(let i=0;i<this.exam.exam_user_info.length;i++){
                    if(this.exam.exam_user_info[i].name==='姓名'){
                        nameIndex=i;
                    }else if(this.exam.exam_user_info[i].name==='电话号码'){
                        phoneIndex=i;
                    }else if(this.exam.exam_user_info[i].name==='邮箱'){
                        mailIndex=i;
                    }
                }
                params.append("exam_id",this.exam.exam_id);
                params.append("candidate_name",this.candidateInfo[nameIndex]);
                params.append("candidate_phone",this.candidateInfo[phoneIndex]);
                params.append("candidate_mail",this.candidateInfo[mailIndex]);
                let result=await axios({
                    method: 'post',
                    url: '/judgeExamUserInfoExist',
                    data: params,
                });
                if(result.data===1){
                    this.state++;
                }else{
                    this.$message({
                        message: '个人信息不存在,请确认是否正确,或联系笔试负责人',
                        type: 'warning'
                    });
                }
            },
            isCanJoinExam(){
                let time=this.exam.exam_start_time;
                let time1=time.split(" ")[0];
                let hour=parseInt(time.split(" ")[1].split(":")[0]);
                let minute=parseInt(time.split(" ")[1].split(":")[1]);
                minute+=this.exam.exam_noEntry_time;
                if(minute>=60){
                    hour++;
                    minute-=60;
                }
                let now=time.split(" ")[0]+" "+hour+":"+minute;
                return new Date().getTime()<new Date(now).getTime();
            },
            joinExam(){
                if(this.isCanJoinExam()){
                    let params=new FormData();
                    params.append("exam_id",this.exam.exam_id);
                    params.append("candidate_name",this.candidateInfo[0]);
                    params.append("candidate_phone",this.candidateInfo[1]);
                    params.append("candidate_mail",this.candidateInfo[2]);
                    axios({
                        method: 'post',
                        url: '/updateExamUserState',
                        data: params,
                    });
                    window.location.href="/test_examing/"+this.exam.exam_id;
                }else{
                    this.$message({
                        message: '笔试开始'+this.exam.exam_noEntry_time+"后不允许进入",
                        type: 'warning'
                    });
                }
            },
            async isEndExam(){
                let result=await axios.get('/getOneExamUser?exam_id='+this.exam.exam_id);
                if(result.data.exam_user_state===2){
                    window.location.href="/test_after_exam_end/"+this.exam.exam_id;
                }
                if(!this.isCanJoinExam()){
                    window.location.href="/test_after_exam_end/"+this.exam.exam_id;
                }
            }
        }
    })
</script>
</html>